@import "@styles/color.less";

.scale-hairline-common(@color, @top, @right, @bottom, @left) {
    content: "";
    position: absolute;
    background-color: @color;
    display: block;
    z-index: 1;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
  }
  
  .hairline(@direction, @color: @borderColor) when (@direction = "top") {
    border-top: 1px solid @color;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        border-top: none;
  
        &::before {
          .scale-hairline-common(@color, 0, auto, auto, 0);
          width: 100%;
          height: 1px;
          transform-origin: 50% 50%;
          transform: scaleY(0.5);
  
          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  
  .hairline(@direction, @color: @borderColor) when (@direction = "right") {
    border-right: 1px solid @color;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        border-right: none;
  
        &::after {
          .scale-hairline-common(@color, 0, 0, auto, auto);
          width: 1px;
          height: 100%;
          background: @color;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);
  
          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  
  .hairline(@direction, @color: @borderColor) when (@direction = "bottom") {
    border-bottom: 1px solid @color;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        border-bottom: none;
  
        &::after {
          .scale-hairline-common(@color, auto, auto, 0, 0);
          width: 100%;
          height: 1px;
          transform-origin: 50% 100%;
          transform: scaleY(0.5);
  
          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  
  .hairline(@direction, @color: @borderColor) when (@direction = "left") {
    border-left: 1px solid @color;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        border-left: none;
  
        &::before {
          .scale-hairline-common(@color, 0, auto, auto, 0);
          width: 1px;
          height: 100%;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);
  
          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  
  .hairline(@direction, @color: @borderColor, @radius: 0)
  when
  (@direction = "all") {
    border: 1px solid @color;
    border-radius: @radius;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border: none;
  
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          border: 1px solid @color;
          border-radius: @radius * 2;
          transform-origin: 0 0;
          transform: scale(0.5);
          box-sizing: border-box;
          pointer-events: none;
  
          // @media (min-resolution: 3dppx) {
          //   width: 300%;
          //   height: 300%;
          //   border-radius: @radius * 3;
          //   transform: scale(0.33);
          // }
        }
      }
    }
  }
  
  .hairline-remove(@position) when (@position = "left") {
    border-left: 0;
    &:before {
      display: none !important;
    }
  }
  
  .hairline-remove(@position) when (@position = "right") {
    border-right: 0;
    &:after {
      display: none !important;
    }
  }
  
  .hairline-remove(@position) when (@position = "top") {
    border-top: 0;
    &:before {
      display: none !important;
    }
  }
  
  .hairline-remove(@position) when (@position = "bottom") {
    border-bottom: 0;
    &:after {
      display: none !important;
    }
  }
  
  .hairline-remove(@position) when (@position = "all") {
    border: 0;
    &:before {
      display: none !important;
    }
  }